<template>
	<view class="y-flex y-row y-align-center y-justify-center pt-10 pb-20" @tap="handleTap">
		<com-loading :visible="state == 'loading'" :color="color" size="35"></com-loading>
		<text class="fs-24 ml-10" :style="{color: color}" v-if="state == 'loading' ? loadingText : state == 'end' ? endText : clickText">{{ state == 'loading' ? loadingText : state == 'end' ? endText : clickText}}</text>
	</view>
</template>

<script>
	export default {
		props: {
			state: {
				type: String,
				default: ''
			},
			loadingText: {
				type: String,
				default: ''
			},
			clickText: {
				type: String,
				default: '₍ᐢ⸝⸝›   ̫ ‹⸝⸝ᐢ₎点我加载更多'
			},
			endText: {
				type: String,
				default: '~~ ੭ ᐕ)੭*⁾⁾再怎么拉也没有了 ~~'
			},
			border: {
				type: Boolean,
				default: true
			},
			color: {
				type: String,
				default: '#999'
			}
		},
		methods: {
			handleTap () {
				if ( ['loading', 'end'].includes(this.state) ) return
				this.$emit('loadmore')
			}
		}
	}
</script>

<style>
</style>